<template>
  <div>
    <div style="margin: 20px;">
        <h2>申请售后</h2>
    </div>
    <el-divider></el-divider>
    <div class="formbox">
        <el-form :model="Form" :rules="rules" ref="Form" label-width="100px" class="demo-ruleForm">
            <el-form-item label="请填写标题" prop="name">
                <el-input v-model="Form.name" placeholder="请填写标题"></el-input>
            </el-form-item>
        </el-form>
    </div>
    <el-divider></el-divider>
    <div class="formbox">
        <el-form :inline="true" :model="Form" :rules="rules" ref="Form" label-width="100px" class="demo-ruleForm">
            <el-form-item label="请选择分类" prop="category">
                <el-input v-model="Form.category" placeholder="请选择分类"></el-input>
            </el-form-item>
            <el-form-item label="关联的商品" prop="gname">
                <el-input v-model="Form.gname"></el-input>
            </el-form-item>
            <el-form-item label="关联的订单" prop="oid">
                <el-input v-model="Form.oid"></el-input>
            </el-form-item>
        </el-form>
    </div>
    <el-divider></el-divider>
    <div class="formbox">
        <el-form :model="Form" :rules="rules" ref="Form" label-width="100px" class="demo-ruleForm">
            <el-form-item label="请描述问题" prop="desc">
                <el-input type="textarea" v-model="Form.desc" placeholder="请描述问题"></el-input>
            </el-form-item>
        </el-form>
    </div>
    <el-divider></el-divider>
    <div class="formbox">
        <el-form :model="Form" :rules="rules" ref="Form" label-width="100px" class="demo-ruleForm">
            <el-form-item label="上传图片" prop="picture">
                <el-upload
                    action=""
                    id="img1"
                    class="avatar-uploader"
                    multiple
                    :limit="5"
                    :show-file-list="true"
                    :http-request="UnloadImg">

                    <i class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
        </el-form>
    </div>
    <el-divider></el-divider>
    <div class="formbox">
        <el-form :inline="true" :model="Form" :rules="rules" ref="Form" label-width="100px" class="demo-ruleForm">
            <el-form-item label="联系电话" prop="tel">
                <el-input  v-model="Form.tel" placeholder="请输入11位手机号"></el-input>
            </el-form-item>
            <el-form-item label="电子邮箱" prop="email">
                <el-input  v-model="Form.email" placeholder="请输入合法的邮箱地址"></el-input>
            </el-form-item>
        </el-form>
    </div>
    <el-divider></el-divider>
    <div style="padding-bottom: 30px;margin-left: 100px;">
        <el-button type="success" round>提交</el-button>
    </div>
  </div>
</template>
<script>
export default {
    data(){
        return{
            Form: {
                name:'',
                gname:'',
                oid:'',
                category:'',
                desc:'',
                imageurl:[],
                tel:'',
                email:''
            },
            rules: {
            name: [
                { required: true, message: '请输入活动名称', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            gname: [
                { required: true, message: '请选择关联商品', trigger: 'blur' }
            ],
            oid: [
                { required: true, message: '请选择关联订单', trigger: 'blur' }
            ],
            category: [
                { required: true, message: '请选择分类', trigger: 'blur' }
            ],
            desc:[
                { required: true, trigger: 'blur' }
            ],
            tel:[
                { required: true, message: '请输入11位电话号码', trigger: 'blur' }
            ]
            }
        }
    },
    methods:{
        UnloadImg(file){
          this.ImageUrl = URL.createObjectURL(file.file);
          this.Form.imageurl.push(file.file)
        },
    }
}
</script>
<style lang="less" scoped>
    .formbox{
        margin-left:20px ;
        .el-form-item {
            .el-input {
                width: 200px;
            }
            .el-textarea{
                width: 600px;
            }
            }
    }
</style>
